<template>
  <div>
    <el-row>
      <el-col>
        <el-alert title="添加商品信息" type="info" show-icon center> </el-alert>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-steps :active="active"  finish-status="success" align-center>
          <el-step title="基本信息"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <el-tabs :tab-position="tabPosition" name="0">
          <el-tab-pane label="基本信息">
            <el-form>
              <el-form-item label="商品名称">
                <el-input v-model="seachObj.goods_name"></el-input>
              </el-form-item>
              <el-form-item label="商品价格">
                <el-input v-model="seachObj.goods_price"></el-input>
              </el-form-item>
              <el-form-item label="商品重量">
                <el-input v-model="seachObj.goods_weight"></el-input>
              </el-form-item>
              <el-form-item label="商品数量">
                <el-input v-model="seachObj.goods_number"></el-input>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col>
                    <el-row style="margin-top: 20px">
                      <label>请选择分类:</label>
                      <el-cascader
                        @click="next"
                        v-model="selectkeys"
                        :options="typelist"
                        :props="{
                          expandTrigger: 'hover',
                          label: 'cat_name',
                          value: 'cat_id',
                        }"
                        @change="handleChange"
                        size="small"
                      ></el-cascader>
                    </el-row>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </el-tab-pane>
           <el-tab-pane label="商品参数" name="1">
             <el-form>
            <!-- 遍历集合中参数名称attr_name -->
              <el-form-item v-for="(item,index) in paramslist" :label="item.attr_name" :key="index">         
                 <el-checkbox v-model="checked1" :label="item" border></el-checkbox>   
              </el-form-item>
              </el-form>
          </el-tab-pane>
          <el-tab-pane label="商品属性">

             <el-form>
               <el-form-item label="主体-品牌"  v-for="(item,index) in paramsClean" :label="item.attr_name" :key="index">
                 <el-input  v-model="item.attr_vals"></el-input>
               </el-form-item>
             </el-form>

          </el-tab-pane>
          <el-tab-pane label="商品图片">定时任务补偿</el-tab-pane>
          <el-tab-pane label="商品内容">定时任务补偿</el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked1:true,
      paramslist:[],//动态数据
      paramsClean:[],//静态数据
      active: 0,
      tabPosition: "left",
      seachObj: {
        goods_name: "",
        goods_cat: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_introduce: "",
        pics: "",
        attrs: "",
      },
      selectkeys: [],//级联下拉框双向数据绑定的属性
      typelist: [], //级联下拉的数据源
      searchObj: {
        id: 0,
        attr_id: "", //分类参数 ID
        attr_name: "", //分类参数名称
        cat_id: "", //分类参数所属分类
        attr_sel: "", //only:输入框(唯一) many:后台下拉列表/前台单选
        attr_write: "", //manual:手工录入 list:从列表选择
        attr_vals: "", //如果 attr_write:list,那么有值，该值以逗号分隔
      },
    };
  },

  methods: {
    next() {
      if (this.active++ > 4) this.active = 0;
    },
    //数据渲染添加首页
    async query() {
      let rst = await this.$http.get(`categories/${this.searchObj.attr_id}`);
      console.log(rst);
      this.typelist = rst.data;
    },
     //获取动态列表的值
    async give(){
     let id=this.selectkeys[2]
     let rst=await this.$http.get(`categories/${id}/attributes`,{sel:'many'})
     console.log(rst);
     //结构获取的动态列表的值 赋值给数据源
     this.paramslist=rst.data.map(item=>item.attr_vals)
     console.log(this.paramslist);
     },
     //获取静态列表的值
     async gave(){
        let id=this.selectkeys[2]
        let rst=await this.$http.get(`categories/${id}/attributes`,{sel:'only'})
        console.log(rst);
        this.paramsClean=rst.data
        console.log(this.paramsClean);

     },
    //切换动态静态时触发的函数
    handleClick(tab, event) {
      
      console.log(tab, event);
    },
    //级联下拉窗值改变
    handleChange(value) {
      console.log(value);
      this.give()
      this.gave()
    },
  },
  mounted() {
    this.query();
  },
};
</script>


<style lang="less" scoped>
</style>